<template>
	<view>
		<view style="padding: 20upx;font-size: 30upx;background: #FFFFFF;">
			<view style="display: flex;">
				<view style="white-space: nowrap;">订单编号：</view>
				<view>{{orderId}}</view>
			</view>
			<view>订单总金额：{{total}}元</view>
		</view>
		<view style="background: #FFFFFF;font-size: 30upx;margin-top: 30upx;">
			<view style="border-bottom: 1px solid #E6E6E6;padding: 30upx;">支付方式</view>
			<view style="padding: 0 30upx;">
				<view class="option" @click="pay('wxpay')">
					<view class="middle">
						<image src="../../static/icon/wxpay.png"></image>
						<text>微信支付</text>
					</view>
					<uni-icon type="checkbox-filled" size="40" :class="payMode === 'wxpay'? 'check':'none'"></uni-icon>
				</view>
				<view class="line"></view>
				<view class="option" @click="pay('alipay')">
					<view class="middle">
						<image src="../../static/icon/alipay.png"></image>
						<text>支付宝支付</text>
					</view>
					<uni-icon type="checkbox-filled" size="40" :class="payMode === 'alipay'? 'check':'none'"></uni-icon>
				</view>
				<view class="line"></view>
				<view class="option" @click="pay('balance')">
					<view class="middle">
						<image src="../../static/icon/balance.png"></image>
						<text>余额支付</text>
					</view>
					<uni-icon type="checkbox-filled" size="40" :class="payMode === 'balance'? 'check':'none'"></uni-icon>
				</view>
			</view>
			<view>
				<button @click="cancel">取消</button>
				<button @click="topay">支付</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		get,
		post,
		showToast,
		wechatPay
	} from '../../js/common';
	export default {
		data() {
			return {
				orderId: '',
				total: 0,
				payMode: 'balance',
				goodsName: ''
			}
		},

		onLoad(e) {
			this.orderId = e.orderId
			this.total = e.total
			this.goodsName = e.goodsName


		},
		methods: {
			pay(payMode) {
				this.payMode = payMode
			},
			topay() {
				switch (this.payMode) {
					case 'alipay':
						// 支付宝
						this.aliPay()
						break
					case 'wxpay':
						// 徽信
						this.wxPay()
						break
					case 'balance':
						this.balancePay()
						break
				}
			},
			cancel() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			aliPay() {
				let params = {
					orderId: this.orderId,
					totalAmount: this.total,
					subject: this.goodsName
				}
				post('mobileapi/mobile/pay/alipay/wapPay', params).then(res => {
					window.open('_ blank')
					const div = document.createElement('div');
					div.innerHTML = res.wapUrl;
					document.body.appendChild(div)
					document.forms[0].submit()
				})
			},
			wxPay() {
				let orderId = this.orderId
				let total = this.total
				let subject = this.goodsName

				let that = this
				var ua = navigator.userAgent.toLowerCase();
				var isWeixin = ua.indexOf('micromessenger') != -1;

				if (isWeixin) {
					var url = 'http://yingyuadmin.yuzhekeji.top/busywork/pay/getCode?orderId=32131321&subject=这是测试&totalAmount=1'

					var enUrl = encodeURI("http://yingyuadmin.yuzhekeji.top/busywork/pay/getCode?orderId=32131321&subject=这是测试&totalAmount=1")

					window.location.href =
						'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1ed5fe5c7069ddb2&redirect_uri=http%3a%2f%2fyingyuadmin.yuzhekeji.top%2fbusywork%2fpay%2fgetCode%3forderId%3d'+orderId+'%26subject%3dffdffsfdsa%26totalAmount%3d'+total+'&response_type=code&scope=snsapi_base#wechat_redirect'
				} else {
					let params = {
						orderId: this.orderId,
						totalAmount: this.total,
						subject: '盈余商城-' + this.goodsName
					}
					post('mobileapi/mobile/pay/wxpay/tradePrecreatePay', params).then(res => {
						window.location.href = res.data
					})
					return false;
				}
			},

			onBridgeReady(appId, timeStamp, nonceStr, packager, signType, paySign) {
				var vm = this;
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						debug: true,
						"appId": 'kfsdfsf', //公众号名称，由商户传入
						"timeStamp": '123131331231', //时间戳
						"nonceStr": 'kjkjklj', //随机串
						"package": 'jkjlkjklj', //预支付id
						"signType": 'MD5', //微信签名方式
						"paySign": 'jkjkjkl', //微信签名
					},
					function(res) {
						//            debugger;
						// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						if (res.err_msg == "get_brand_wcpay_request：ok") {
							alert("支付成功")
							showToast('支付成功')
							//                vm.$router.push("/reservedBerth");
						} else {
							//                alert("支付失败,请跳转页面"+res.err_msg);
							showToast('"支付失败,')
						}
					}
				);


			},
			balancePay() {
				let params = {
					orderId: this.orderId
				}
				post('mobileapi/mobile/pay/balancePay', params).then(res => {
					if (res.code === 0) {
						uni.redirectTo({
							url: 'success'
						})
					} else {
						uni.showToast({
							title: res.msg
						})
					}
				})
			}
		},
	}
</script>
<style>
	.option {
		height: 80upx;
		line-height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: Center;
	}

	.option image {
		width: 60upx;
		height: 60upx;
		margin-right: 20upx;
	}

	.middle {
		display: flex;
		align-items: center;
	}

	.line {
		width: 100%;
		height: 1px;
		background: #E6E6E6;
	}

	.check {
		color: #D7000F;
	}

	.none {
		color: #999;
	}
</style>
